require(['./config'], () => {
  require(['template', 'header'], (template, header) => {
    class Shopping {
      constructor () {
        this.init()
      }
      init () {
        // 根据localStorage的数据去渲染页面
        const cartList = window.localStorage.getItem('cart')
        // 判读那购物车是否为空
        if (cartList) {
          // 渲染table
          this.cartList = JSON.parse(cartList)
          this.renderCart()
        } else {
          // 代表购物车没有数据
          $('#shopping_car').hide()
          $('#cart-empty').show()
        }
      }
      renderCart () {
        $('#shop_tbody').html(template('srcShop', { cartList: this.cartList }))
        // 购物车也米娜渲染完成以后默认调用一次计算总价
        this.calcTotalMoney()
        this.checksChange()
      }
      checksChange () {
        // 单选框修改事件
        // 保留外层this
        const _this = this
        $('.checks').on('change', function () {
          // 找到当前商品的id
          const id = Number($(this).parents('tr').attr('data-id'))
          console.log(id)
          _this.cartList = _this.cartList.map(shop => {
            // 根据从数据里找到当前商品，把商品的check属性赋值为当前选框的状态
            if (shop.id === id) {
              shop.check = $(this).prop('checked')
            }
            return shop
          })
          // 把localStorage更新
          window.localStorage.setItem('cart', JSON.stringify(_this.cartList))
          // 重新算一次总价
          _this.calcTotalMoney()
        })
      }
      calcTotalMoney () {
        // 计算总价，无论做了什么骚操作，只要对结果有影响我就调用这个方法重新算总价
        const money = this.cartList.reduce((total, shop) => {
          if (shop.check) {
            total += shop.price * shop.count
          }
          return total
        }, 0)
        $('#Paymoney').html(money)
      }
    }
    new Shopping()
  })
})